<template>
  <view class="content">
    <view class="item" v-for="(item, index) in tableData" :key="index" @click="web_view(item.Other_Service_Detail_URL)">
      <view class="right">
        <text class="title text-success">{{
          item.Other_Service_Detail_Name
        }}</text>
        <view class="cont">
          <view>
            <view class="t_left">地址:</view>
            <view class="t_right">{{ item.Other_Service_Detail_Address }}</view>
          </view>
          <view>
            <view class="t_left">网址:</view>
            <view class="t_right">{{ item.Other_Service_Detail_URL }}</view>
          </view>
          <view>
            <view class="t_left">电话:</view>
            <view>{{ item.Other_Service_Detail_Phone_Original }}</view>
          </view>
          <view>
            <view class="t_left">提供服务:</view>
            <view>{{ item.Other_Service }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getTables } from "@/api/Otherservices.js";
export default {
  data() {
    return {
      index: 0,
      form: {
        Data: "other_service_detail",
        page: 1,
        limit: 1,
        Primary_Key: "0",
        Primary_Key_Name: "Other_Service_Type",
      },
      tableData: [],
      switch: false,
      url: "",
    };
  },
  onLoad(options) {
    // 获取传递的参数
    const { title } = options;
    this.index = options.index;
    // 设置标题文本
    uni.setNavigationBarTitle({
      title: title,
    });
    this.getTablesMethods(this.form);
  },
  methods: {
    web_view(url) {
      uni.navigateTo({
        url: "/pages/index/web_view?url=" + url,
      });
    },
    async getTablesMethods(form) {
      if (this.index == 0) {
        this.form.Primary_Key = "0";
      } else if (this.index == 1) {
        this.form.Primary_Key = "1";
      } else if (this.index == 2) {
        this.form.Primary_Key = "2";
      } else {
        this.form.Primary_Key = "3";
      }
      //获取list
      const res = await getTables({
        data: form,
      });
      this.tableData = res.tableData;
      // this.limit = Number(res.limit);
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 44px);
  width: 100%;
  background-color: #f5f5f5;
  padding: 20rpx;
  box-sizing: border-box;

  .item {
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;

    .right {
      width: 300rpx;
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 40rpx;
        font-weight: bold;
      }

      text {
        display: inline-block;
        //  width: 600rpx;
        margin: 10rpx 0;
      }

      .cont {
        // display: flex;
        width: 100%;

        view {
          display: flex;
          flex-flow: column;

          .t_left {
            // width: 17%;
            color: #28a745;
            margin: 10rpx 0;
            font-weight: bold;
          }

          .t_right {
            // width: 80%;
            word-wrap: break-word;
          }
        }
      }
    }
  }
}
</style>
